<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/assets/layui/css/layui.css">
    <title>系统设置</title>
    <style>
        .layui-form-item .layui-input-inline {
            width: 200px;

        }
    </style>
</head>

<body>
    <div>
        <div class="layui-layout layui-layout-admin">
            <!-- 导入公共页面 -->
            {{ include "./common/header.html" }}
            <!-- 导入公共页面 -->
            {{ include "./common/side.html" }}
            <div class="layui-body">
                <!-- 内容主体区域 -->
                <div style="padding: 15px;">
                    <h1>系统设置</h1>
                    <div>
                        <form class="layui-form" action="" id="artForm" lay-filter="example">
                            <div class="layui-form-item">
                                <label class="layui-form-label">标题</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="val" lay-verify="title" autocomplete="off"
                                        placeholder="请输入标题" class="layui-input" >
                                </div>
                            </div>
                            <!--  -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">logo</label>
                                <div class="layui-input-inline">
                                    <input type="file" name="pic" id="pic" onchange="uploadFile(this)"
                                        style="display:none">
                                    <a class="layui-btn" href="javascript:;" id="upload">上传文件</a>
                                    <img src="" id="preview" alt="" style="width:80px">
                                </div>
                            </div>
                            <!--  -->
                        </form>
                        <div class="layui-btn layui-btn-primary" id="submitForm">确认</div>
                    </div>
                </div>
                <div class="layui-footer">
                    <!-- 底部固定区域 -->
                    底部固定区域
                </div>
            </div>
        </div>
</body>

</html>
<script src="/assets/layui/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.1/js.cookie.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script>
layui.use(['form', 'layedit', 'laydate'],async function(){
    let form = layui.form
    let editor;
    let oldPic;
        // 上传文件
        $("#upload").on('click',()=>{
            $("#pic")[0].click();
        })
        let result =  await $.get('/systemData')
       let {val,logPic} = result
        // 回显表单数据
        form.val("example", {
            val,
            logPic
        });
        $("#preview").attr('src',logPic)
        editor.txt.html(result.val)

    })
        // 上传文件
        function uploadFile(fileEle){
        const file = fileEle.files[0];
        // 预览图片
        const fileReader = new FileReader();
        fileReader.readAsDataURL(file)
        fileReader.onload = function(){
            const base64 = this.result
            $("#preview").attr('src',base64)
            isUpdPic = 1
        }

    }

    $("#submitForm").on('click', async () => {
    const formData = new FormData($("#artForm")[0])
    const {code,message} = await $.ajax({
        url: "/systemData",
        type: 'post',
        data: formData,
        contentType: false,
        processData: false
    })
    layer.msg(message)
    if (code === 0) {
        location.href = '/'
        }

    })
</script>